<template>
  <div>
    <div v-show="showDetail">
      <group label-width="4.5em" label-margin-right="2em" label-align="right">
        <cell title="申 请 人">{{name}}</cell>
        <cell title="月 份">{{month}}</cell>
        <cell title="积分类别" @click.native="detailShow()"><div style="color:blue">{{scorecat}}</div></cell>
        <cell title="申请分数">{{score}}</cell>
        <cell title="申请描述">{{description}}</cell>
        <x-input title="审批分数" placeholder="必填" :required="true" v-model="tlScore"></x-input>
        <x-textarea title="审批意见" placeholder="请填审批意见" :show-counter="false" :rows="3" v-model="suggestion"></x-textarea>
      </group>
      <br>
      <div style="padding:15px;">
        <flexbox>
          <flexbox-item>
            <x-button type="primary" :disabled="submitDisable" @click.native="submitScore(2)">同意</x-button>
          </flexbox-item>
          <flexbox-item>
            <x-button plain type="primary" :disabled="submitDisable" @click.native="submitScore(0)">退回</x-button>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
    <div v-show="applyFinish">
      <msg title="审批完成" icon="success"></msg>
      <div style="padding:15px;">
            <flexbox>
              <flexbox-item>
                <x-button link="/work" type="primary">完 成</x-button>
              </flexbox-item>
              <flexbox-item>
                <x-button link="/tabbar/score-status" type="primary">继续审批</x-button>
              </flexbox-item>
            </flexbox>
          </div>
    </div>
    <toast v-model="status" type="text">操作成功</toast>
    <toast v-model="errorTosat" type="warn" width="12em">提交失败，分数输入错误</toast>
    <toast v-model="inputError" type='warn'>请输入必填值</toast>
    <toast v-model="scopeError" type='warn'>请输入合适范围:1-{{score}}</toast>
  </div>
</template>

<script>
  import { Cell, Group, XInput, XTextarea, FlexboxItem, Flexbox, XSwitch, XButton, Toast, Msg} from 'vux'

  export default {
    components: {
      Flexbox,
      FlexboxItem,
      Cell,
      Group,
      XInput,
      XButton,
      XTextarea,
      XSwitch,
      Toast,
      Msg
    },
    data: function () {
      var routerParams = this.$route.query.scoreId
      var ms_staffId = localStorage.getItem('ms_staffId')
      return {
        staffId: ms_staffId,
        scoreId: routerParams,
        name: '',
        description: '',
        suggestion: '',
        month: '',
        scorecat: '',
        score: '',
        tlScore: '',
        detail: '',
        scoreDetail: '',
        status: false,
        errorTosat: false,
        inputError: false,
        scopeError: false,
        submitDisable: false,
        applyFinish: false,
        showDetail: true,
        id: ''
      }
    },
    mounted: function () {
      this.getScoreInfo()
    },
    methods: {
      getScoreInfo: function () {
        var self = this
        self.$ajax({
          method: 'get',
          url: '../wx/userAdditional/search/detail',
          params: {
            scoreId: self.scoreId
          }
        })
        .then(function (res) {
          self.detail = res.data
          self.name = self.detail[0].userName
          self.month = self.detail[0].month
          self.score = self.detail[0].selfScore
          self.tlScore = self.detail[0].selfScore
          self.scorecat = self.detail[0].category
          self.description = self.detail[0].description
          self.scoreDetail = self.detail[0].scoreDetail
          self.id = self.detail[0].id
        })
        .catch(function (err) {
          console.log(err)
          self.errorTosat = true
        })
      },
      submitScore: function (scoreStatus) {
      var self = this
      var scoreId = self.id

      //校验分数
      if (self.tlScore=='') {
        self.inputError = true
      }else{
          if (self.tlScore < 1 || self.tlScore > self.score) {
          self.scopeError = true
        }
      }

      if (scoreStatus == 0) {
        self.tlScore = 0
      }
      if (!self.inputError && !self.scopeError) {
        self.submitDisable = true 
        self.$ajax({
          method: 'post',
          url: '../wx/userAdditional/save/'+self.staffId,
          data: {
            id: scoreId,
            status: scoreStatus,
            tLScore: self.tlScore,
            suggestion: self.suggestion
          }
        })
        .then(function (res) {
          self.applyFinish = true
          self.showDetail = false
        })
        .catch(function (err) {
          console.log(err)
          self.errorTosat = true
        })
      }
    },
    detailShow: function () {
      var text = this.scoreDetail
      this.$vux.alert.show({
        title: '详情信息',
        content: text
      })
    }
    }
  }
</script>
